import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';

// 日历图标组件
class CalendarIcon extends StatelessWidget {
  final String month;
  final String day;
  final Color? themColor;
  final double? width;

  const CalendarIcon({
    Key? key,
    required this.month,
    required this.day,
    this.themColor,
    this.width,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final double w = width ?? 80.w;
    final double h = w * 1.1;
    final double monthSectionHeight = h * 0.37;

    return SizedBox(
      width: w,
      height: h,
      child: Stack(
        children: [
          // 主体卡片
          Positioned(
            top: 4, // 为顶部挂耳留出空间
            child: SizedBox(
              width: w,
              height: h - 4,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Column(
                  children: [
                    // 月份部分
                    Container(
                      width: w,
                      height: monthSectionHeight,
                      color: themColor ?? LxCol.theme,
                      child: Padding(
                        padding: const EdgeInsets.only(top: 4.0),
                        child: Center(
                          child: Text(
                            month,
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: w * 0.23,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ),
                    // 日期部分
                    Expanded(
                      child: Container(
                        width: w,
                        color: Colors.white,
                        child: Stack(
                          children: [
                            Center(
                              child: Text(
                                day,
                                style: TextStyle(
                                  color: themColor ?? LxCol.theme,
                                  fontSize: w * 0.4,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                            // 顶部内部阴影效果
                            VerticalGradientContainer(
                              colors: _createCurvedGradient(
                                  themColor ?? LxCol.theme),
                              child: Container(height: h * 0.2),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

          // 顶部挂耳
          Positioned(
            top: 0,
            left: w * 0.2,
            child: _HangerEar(width: w * 0.15),
          ),
          Positioned(
            top: 0,
            right: w * 0.2,
            child: _HangerEar(width: w * 0.15),
          ),
        ],
      ),
    );
  }

  // 渐变色列表
  List<Color> _createCurvedGradient(Color color) {
    const curve = Curves.easeInOut;
    return [
      color.withOpacity(_getOpacity(4, 5, curve) * 0.6),
      color.withOpacity(_getOpacity(3, 5, curve) * 0.4),
      color.withOpacity(_getOpacity(2, 5, curve) * 0.3),
      color.withOpacity(_getOpacity(1, 5, curve) * 0.3),
      color.withOpacity(_getOpacity(0, 5, curve) * 0.3),
    ];
  }

  double _getOpacity(int index, int total, Curve curve) {
    double progress = index / (total - 1);
    return curve.transform(progress);
  }
}

class _HangerEar extends StatelessWidget {
  final double width;

  const _HangerEar({Key? key, required this.width}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width * 0.5,
      height: width * 0.8,
      decoration: BoxDecoration(
        color: Colors.grey[300],
        borderRadius: BorderRadius.all(Radius.circular(width * 0.3)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            blurRadius: 2,
            offset: const Offset(0, 1),
          ),
        ],
      ),
    );
  }
}
